<template>
	<mescroll-uni @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">

		<view :style='{"minHeight":"100%","padding":"20rpx","flexWrap":"wrap","background":"#F3F3F3","display":"flex","width":"100%","height":"auto"}'>
			<!--header end-->
			<view class="cu-bar bg-white search" :style='{"width":"100%","padding":"30rpx 24rpx","background":"none","display":"flex","height":"auto"}'>
				<view class="search-form round" :style='{"border":"none","margin":"0 20rpx 0 0","position":"relative","flex":"1"}'>
					<text class="icon iconfont icon-fangdajing07" :style='{"color":"rgb(153, 153, 153)","left":"0px","textAlign":"center","width":"100rpx","fontSize":"50rpx","lineHeight":"100rpx","position":"absolute","right":"0px"}'></text>
					<input :style='{"border":"0","padding":"20rpx 20rpx 20rpx 100rpx","color":"#333","borderRadius":"50rpx","background":"#fff","width":"100%","lineHeight":"60rpx","fontSize":"34rpx","height":"100rpx"}' v-model="searchForm.title" type="text" placeholder="请输入标题关键词" ></input>
				</view>
				<button :style='{"border":"0","padding":"0px","margin":"0","color":"#fff","borderRadius":"50rpx","background":"linear-gradient( 135deg, #9EEEEB 0%, #99ABFF 100%)","width":"160rpx","lineHeight":"100rpx","fontSize":"34rpx","height":"100rpx","fontWeight":"bold"}' @tap="search" class="cu-btn shadow-blur round">搜索</button>
			</view>
			<view class="page-section-title" :style='{"margin":"50rpx 0 20rpx 20rpx","fontSize":"36rpx","color":"#333","fontWeight":"bold"}'>
				请选择话题分类
			</view>
			<scroll-view scroll-x="true" class="category-one" :style='{"padding":"0 0 20rpx 0","margin":"10rpx 0 20rpx","borderRadius":"20rpx","background":"none","flexDirection":"row","display":"flex","width":"100%","height":"auto"}'>
				<view :class='categoryName === item.typename ? "active" : ""' class="tab" v-for="(item,index) in categoryList" :key="index" @tap="categoryClick(item.typename)">{{item.typename}}</view>
			</scroll-view>
			<view class="list" :style='{"width":"100%","padding":"20rpx","flex":"1"}'>
				<view :style='{"color":"#333","width":"100%","margin":"0 0 30rpx","fontSize":"36rpx","fontWeight":"bold"}'>
					留言互动专区
				</view>
				<view @tap="onDetailTap(item.id)" v-for="(item,index) in list " v-bind:key="index" :style='{"boxShadow":"0 0 20rpx rgba(0, 0, 0, .3)","padding":"30rpx","margin":"0 0 40rpx","borderRadius":"20rpx","background":"#fff","display":"flex","justifyContent":"space-between"}'>
					<image v-if="item.cover" :src="baseUrl + item.cover.split(',')[0]" mode="aspectFill" :style='{"width":"200rpx","margin":"10rpx 0 0","borderRadius":"16rpx","height":"200rpx"}'></image>
					<view :style='{"width":"calc(100% - 230rpx)"}'>
						<view :style='{"color":"#333","fontSize":"36rpx","fontWeight":"bold","margin":"0 0 20rpx","lineHeight":"1.5"}'>{{item.title}}</view>
						<view :style='{"color":"#666","fontSize":"32rpx","margin":"0 0 10rpx"}'>
							分类：{{item.typename}}
						</view>
						<view :style='{"color":"#666","fontSize":"32rpx","margin":"0 0 10rpx"}'>
							发布人：<text style="color:#46A6FF">{{item.userid!=userid&&item.isanon==1?'匿名':item.username}}</text>
						</view>
						<view :style='{"color":"#666","fontSize":"32rpx"}'>
							发布时间：{{item.addtime}}
						</view>
					</view>
				</view>
			</view>
			<!--list end-->
		</view>
	</mescroll-uni>
</template>

<script>
	import '@/assets/css/global-restaurant.css'
	import uniIcons from "@/components/uni-ui/lib/uni-icons/uni-icons.vue"
	import uniNoticeBar from "@/components/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue"
	export default {
		components: {
			uniIcons,
			uniNoticeBar
		},
		data() {
			return {
				//轮播
				swiperList: [],
				list: [],
				searchForm:{
					title: ''
				},
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption: {
					page: {
						// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						// size: 5 // 每页数据的数量
					},
					noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '~ 没有更多了 ~',
				},
				hasNext: true,
				categoryList:[],
				categoryName :'全部',
			}
		},
		async onShow() {
			let res = {};
			if(this.userid) {
				res = await this.$api.page('forumtype', {page:1,limit:100});
			} else {
				res = await this.$api.list('forumtype', {page:1,limit:100});
			}
			res.data.list.splice(0,0,{id:0,typename:'全部'})
			this.categoryList = res.data.list;
			this.hasNext = true
			// 重新加载数据
			if (this.mescroll) this.mescroll.resetUpScroll()
		},
		computed: {
			userid(){
				return uni.getStorageSync('appUserid')
			},
			baseUrl() {
				return this.$base.url;
			}
		},
		methods: {
			categoryClick(categoryName){
				this.categoryName = categoryName;
				this.mescroll.resetUpScroll();
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.hasNext = true
				// 重置分页参数页数为1
				mescroll.resetUpScroll()
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				let params = {
					page: this.mescroll.num,
					limit: this.mescroll.size,
					delflag: 0
				}
				if(this.categoryName!='全部'){
					params.typename = '%' + this.categoryName + '%'
				}
				let res = await this.$api.allPublicForm(params);
				// 如果是第一页数据置空
				if (mescroll.num == 1) this.list = [];
				this.list = this.list.concat(res.data.list);
				if (res.data.list.length == 0) this.hasNext = false;
				mescroll.endSuccess(mescroll.size, this.hasNext);
			},
			// 详情
			onDetailTap(id) {
				this.$utils.jump(`../forum-detail/forum-detail?id=${id}`)
			},
			//轮播图跳转
			onSwiperTap(e) {

			},
			// 搜索
			async search(){
				this.mescroll.num = 1
				// 如果是第一页数据置空
				if (this.mescroll.num == 1) this.list = [];
				let params = {
					page: this.mescroll.num,
					limit: this.mescroll.size,
				}
				if(this.searchForm.title){
					params.title = '%' + this.searchForm.title + '%'
				}
				if(this.categoryName!='全部'){
					params.typename = '%' + this.categoryName + '%'
				}
				let res = await this.$api.allPublicForm(params);
				this.list = this.list.concat(res.data.list);
				if (res.data.list.length == 0) this.hasNext = false;
				this.mescroll.endSuccess(this.mescroll.size, this.hasNext);
			}
		}
	}
</script>

<style>
	view {
		font-family: '\5FAE\8F6F\96C5\9ED1';
		font-size: 34rpx;
	}

	.category-one .tab {
		cursor: pointer;
		border-radius: 40rpx;
		padding: 0 20rpx;
		margin: 0 20rpx 20rpx 0;
		color: #333;
		background: #E3E3E3;
		display: inline-block;
		width: auto;
		font-size: 34rpx;
		line-height: 90rpx;
		text-align: center;
		height: 90rpx;
	}
	
	.category-one .tab.active {
		cursor: pointer;
		border-radius: 40rpx;
		padding: 0 20rpx;
		margin: 0 20rpx 20rpx 0;
		color: #fff;
		background: linear-gradient( 317deg, #9AAEFF 0%, #9EEEEB 100%);
		display: inline-block;
		width: auto;
		font-size: 34rpx;
		line-height: 90rpx;
		text-align: center;
		height: 90rpx;
		font-weight: bold;
	}
	
	.page-section-title {
		padding: 0 20rpx;
		position: relative;
	}
	
	page {
		background: #ededed;
	}
</style>
